<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Golang分布式Crontab</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="rol-md-12">
            <div class="page-header">
                <h1>管理后台
                    <small>Golang分布式Crontab</small>
                </h1>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <button type="button" id="new-job" class="btn btn-primary">新建任务</button>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default" style="margin-top: 20px">
                <table id="job-list" class="table table-stripe">
                    <thead>
                    <tr>
                        <th>任务名称</th>
                        <th>shell命令</th>
                        <th>cron操作</th>
                        <th>任务操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--  <tr>
                          <td class="job-name">job1</td>
                          <td class="job-command">echo hello</td>
                          <td class="job-cronExpr">* * * * * * *</td>
                          <td>
                              <div class="but-toolbar">
                                  <button class="btn btn-info edit-job">编辑</button>
                                  <button class="btn btn-danger delete-job">删除</button>
                                  <button class="btn btn-warning kill-job">强杀</button>
                              </div>
                          </td>
                      </tr-->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>


<!--模态框--->
<div id="edit-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">编辑任务</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="edit-name">任务名称</label>
                        <input type="text" class="form-control" id="edit-name" placeholder="任务名称">
                    </div>
                    <div class="form-group">
                        <label for="edit-command">shell命令</label>
                        <input type="text" class="form-control" id="edit-command" placeholder="shell命令">
                    </div>
                    <div class="form-group">
                        <label for="edit-cronExpr">cron表达式</label>
                        <input type="text" class="form-control" id="edit-cronExpr" placeholder="cron表达式">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save-job">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script>
    $(function () {
        $("#job-list").on("click", ".edit-job", function (event) {
            $("#edit-name").val($(this).parents('tr').children('.job-name').text());
            $("#edit-command").val($(this).parents('tr').children('.job-command').text());
            $("#edit-cronExpr").val($(this).parents('tr').children('.job-cronExpr').text());
            $("#edit-modal").modal('show');
        });
        $("#job-list").on("click", ".delete-job", function (event) {
            var jobName = $(this).parents("tr").children(".job-name").text();
            $.ajax({
                url: '/job/delete',
                type: 'post',
                dataType: 'json',
                data: {name: jobName},
                complete: function (resp) {
                    window.location.reload()
                }
            })
        });

        $("#job-list").on("click", ".kill-job", function (event) {
            var jobName = $(this).parents("tr").children(".job-name").text();
            $.ajax({
                url: '/job/kill',
                type: 'post',
                dataType: 'json',
                data: {name: jobName},
                complete: function (resp) {
                    window.location.reload()
                }
            })
        });

        $("#job-list").on("click", ".kill-job", function (event) {
            console.log(event)
        });

        // 保存任务
        $('#save-job').on("click", function () {
            var jobInfo = {
                name: $('#edit-name').val(),
                command: $('#edit-command').val(),
                cronExpr: $('#edit-cronExpr').val()
            };
            $.ajax({
                url: '/job/save',
                type: 'post',
                dataType: 'json',
                data: {job: JSON.stringify(jobInfo)},
                complete: function (resp) {
                    window.location.reload()
                }
            })
        });

        // 新建任务
        $('#new-job').on('click', function () {
            $('#edit-name').val();
            $('#edit-command').val();
            $('#edit-cronExpr').val();
            $('#edit-modal').modal('show')
        });

        function rebuildJobList() {
            $.ajax({
                url: '/job/list',
                dataType: 'json',
                success: function (resp) {
                    if (resp.errno != 0) {
                        return
                    }
                    var jobList = resp.data;

                    $('#job-list tbody').empty();

                    for (var i = 0; i < jobList.length; i++) {
                        var job = jobList[i];
                        var tr = $("<tr>");
                        tr.append($('<td class="job-name">').html(job.name))
                        tr.append($('<td class="job-command">').html(job.command))
                        tr.append($('<td class="job-cronExpr">').html(job.cronExpr))
                        var toolbar = $('<div class="btn-toolbar">')
                            .append('<button class="btn btn-info edit-job">编辑</button>')
                            .append('<button class="btn btn-danger delete-job">删除</button>')
                            .append('<button class="btn btn-warning kill-job">强杀</button>');
                        tr.append($('<td>').append(toolbar));
                        $("#job-list tbody").append(tr);
                    }
                }
            })
        }

        rebuildJobList();
    })
</script>
</body>
</html>